@import '../../var.scss';
page {
  background-color: $page-background-color;
}
.title {
  color: #fff;
}
.header {
  position: relative;
  width: 750rpx;
  height: 362rpx;
  color: #fff;
  .bgImg {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .rules {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    padding: 30rpx;
    .rulesTitle {
      margin-bottom: 20rpx;
      opacity: 0.7;
      font-size: 28rpx;
    }
    .price {
      font-size: 60rpx;
    }
  }
}
.section {
  width: 100%;
  padding: 30rpx;
  background-color: #ffffff;
  .sectionTitle {
    color: $info-color;
    font-size: 22rpx;
  }
  .list {
    display: grid;
    grid-gap: 30rpx 30rpx;
    grid-template-columns: repeat(auto-fill, 210rpx);
    padding: 30rpx 0;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 210rpx;
      height: 70rpx;
      font-size: 34rpx;
      border: 1rpx solid $border-color;
      border-radius: 4rpx;
    }
    .active {
      color: $primary-color;
      border-color: $primary-color;
    }
  }
  .inputBox {
    display: flex;
    align-items: center;
    input {
      flex: 1;
      margin-right: 10rpx;
      margin-left: auto;
      text-align: right;
    }
  }
}
.beSure {
  width: 690rpx;
  margin-top: 40rpx;
  font-size: 34rpx;
  background-color: $primary-color;
  color: #fff;
}
.covers {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  .confirm {
    z-index: 900;
    width: 400rpx;
    height: 542rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0rpx 0rpx 50rpx 7rpx rgba(3, 3, 3, 0.15);
    .imgBox {
      width: 258rpx;
      height: 188rpx;
      margin: 40rpx auto 24rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .payTitle {
      width: 100%;
      margin-bottom: 30rpx;
      color: $success-color;
      font-size: 33rpx;
      text-align: center;
    }
    .failure {
      color: rgba(179, 179, 179, 1);
    }
    .showBottom {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 259rpx;
      height: 56rpx;
      margin: auto;
      margin-top: 26rpx;
      color: rgba(26, 26, 26, 1);
      font-size: 26rpx;
      background: rgba(255, 255, 255, 1);
      border: 1rpx solid rgba(230, 230, 230, 1);
      border-radius: 28rpx;
    }
  }
}
